<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div><h1>{{info}}</h1></div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    /*VUE对象相当于MVVM设计模式中的VM视图模型
    * 该对象负责将页面的元素和某个变量进行绑定，并且Vue会在内存中不断监听
    * 变量值的变化，当变量的值发生改变时Vue框架会自动找到页面的元素
    * 让其跟着发生改变*/
    let v = new Vue({
        el:"body>div",//element元素，写一个选择器用来设置Vue框架的管理范围
        data:{//data里面定义和页面相关的变量，定义完之后Vue会对变量进行监听
            info:"Hello Vue!"
        }
    })
</script>
</body>
</html>